<template>
  <wd-config-provider :themeVars="themeVars">
    <view
      class="default-layout"
      :class="[propsPage.isBg ? 'default-bg' : '']"
      :style="{ paddingTop: `${safeAreaInsets.top}px` }"
    >
      <view
        v-if="propsPage.title"
        class="default-layout-header"
        :style="{ height: `${safeAreaInsets.bottom + 0}px` }"
      />

      <!-- 页面展示 statrt -->
      <view class="default-layout-main" :style="defaultMainHeight">
        <!-- <view
          :class="[
            propsPage.isPadding
              ? 'default-layout-main-padding-content'
              : 'default-layout-main-content',
          ]"
        >
          <slot />
        </view> -->
        <slot />
      </view>
      <!-- 页面展示 end -->
    </view>

    <!-- 配置组件 -->
    <wd-toast />
    <wd-message-box />
  </wd-config-provider>
</template>

<script lang="ts" setup>
import type { ConfigProviderThemeVars } from 'wot-design-uni'
import { computed } from 'vue'

// @ts-expect-error 虚拟模块
/// <reference types="@uni-helper/vite-plugin-uni-pages" />
import { pages } from 'virtual:uni-pages'
import { usePageStore } from '@/store/modules/page'
const { safeAreaInsets } = uni.getSystemInfoSync()

const pageStore = usePageStore()
// 主题
const themeVars: ConfigProviderThemeVars = {
  // colorTheme: 'red',
  // buttonPrimaryBgColor: '#07c160',
  // buttonPrimaryColor: '#07c160',
}

const propsPage = computed(() => {
  const { style, isBg, isSearch, isPadding, isTitle } = getBarPage()

  return {
    title: style.navigationBarTitleText || '',
    isBg: isBg ?? true,
    isSearch: isSearch ?? false,
    isPadding: isPadding ?? true,
    isTitle: isTitle ?? true,
  }
})

const defaultMainHeight = computed(() => {
  return {
    height: `calc(100vh - ${safeAreaInsets.top + safeAreaInsets.bottom}px)`,
    marginTop: propsPage.value.title ? `${safeAreaInsets.top}px` : '0',
  }
})

// 获取当前页面
function getBarPage() {
  const page = getCurrPage()
  if (page) {
    const currentPage = pages.find((item) => item.path === page.route)
    return currentPage || null
  }
  return ''
}
function getCurrPage() {
  try {
    const pages = getCurrentPages()
    if (pages.length) {
      return pages[pages.length - 1]
    }
  } catch (e) {
    console.error(e)
  }
  return undefined
}
</script>

<style lang="scss" scoped>
.default-layout {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  width: 100vw;
  height: 100vh;
  overflow: hidden;

  .default-layout-header {
    &-nav-bar-title {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%;
      font-family:
        PingFangSC,
        PingFang SC;
      font-size: 32rpx;
      font-style: normal;
      font-weight: 500;
      line-height: 48rpx;
      color: #333333;
      text-align: left;
    }
  }

  .default-layout-main {
    flex: 1;
    overflow: hidden;

    &-padding-content,
    &-content {
      height: 100%;
      overflow: auto;
    }

    &-padding-content {
      padding: 0 24rpx;
    }
  }
}
</style>
